<template>
  <div class="wave-tv-box"   ref="Fullscreen">
          <div class="wave-video-box"   @mouseover.stop="controlShow" @mouseout.stop="controlHide" @mousemove.stop="moveVideo()"  >
            <!-- 去除画中画 disablePictureInPicture   controlsList="nodownload" 去除下载功能-->
            <video
            :src="Videodata.video_path"
            disablePictureInPicture
            controlsList="nodownload"
            class="wave-video"
            ref="video"
            @canplay="canplayVideo"
            @timeupdate="timeupdateVideo"
            @ended ="endedVideo"
          ></video>
          </div>
          <div class="wave-mask"  @click.stop="switchVideo" v-if="isCover">
              <div class="wave-cover">
                <div class="wave-cover-info">
                    <div class="wave-cover-info-pic" :style="backgroundImage" @click="handerVideoHistory"></div>
                    <div class="wave-cover-message">
                        <div class="wave-cover-message-playback">
                            {{Videodata.video_play_num}}次播放
                        </div>
                        <div class="wave-cover-message-time">
                            {{Videodata.video_duration_str}}
                        </div>
                    </div>
                </div>
              </div>
          </div>
          <!-- <div class="wave-fullbutton"   >
            <div class="wave-fullbutton-box">
              <button
                  v-show="isControl"
                  class="wave-fullbutton-info"
                  type="button"
                >
                  <i :class="'iconfont ' + play"></i>
                </button>
            </div>
          </div> -->

          <div class="wave-tv-control" v-show="isControl" @mouseover.stop="isControl = true" @mouseout.stop="isControl=false">
            <div class="wave-tv-progress">
              <!-- 这是视频时间进度条 -->
              <div class="wave-tv-all" >
                <div @click="clickProgress($event)"  @mousedown.prevent="startDrag($event)"  ref="progressAll">
                    <div class="wave-tv-progress-now" ref="progressNow"> </div>
                </div>

                <div  class="silder-progress" @mousedown.prevent="startDrag($event)" :style="'left:'+silderProgress+'%'"></div>
              </div>
            </div>
            <div class="wave-tv-bar">
              <div class="wave-tv-bar-left father">
                <button
                  class="wave-tv-play"
                  type="button"
                  @click.stop="switchVideo()"
                >
                  <i :class="'iconfont ' + play"></i>
                </button>
                <div class="wave-tv-duration ">
                  <div class="">{{ presentTime }}</div>
                  <div>/</div>
                  <div class="">{{ totalTime }}</div>
                </div>
              </div>
              <div class="wave-tv-bar-right">
                  <!-- 视频清晰度 -->
                <!-- <div class="wave-tv-frame father">
                  <div class="wave-tv-cheack">高清</div>
                  <div class="wave-tv-list tips" >
                    <div>360p </div>
                    <div>480p</div>
                    <div>720p</div>
                    <div>1080p</div>
                  </div>
                </div> -->
                <div class="wave-tv-speed father"   @mouseover="controlCrurent=1" @mouseout="controlCrurent=0;">
                  <div class="wave-tv-cheack" >{{playSpeed===1? "倍速" : playSpeed+"x"}}</div>
                  <div v-show="controlCrurent===1"  style="position: absolute;left: 0;bottom: 0;width: 100%;height: 41px; padding: 5px;z-index:8;" ></div>
                  <div class="wave-tv-list tips speed-list"  v-show="controlCrurent===1" >
                    <div :class="speedItem===i? 'speed-item speed-active' : 'speed-item'"  v-for="(item,i)  in speedList" :key="i" @click="handleChangeSpeed(item,i)">{{item+"x"}}</div>

                  </div>
                </div>
                <div class="wave-tv-volume father" @mouseover="controlCrurent=2" @mouseout="controlCrurent=0;">
                  <div class="wave-tv-volume-text"  >
                    <i class="iconfont icon-volume"></i>
                  </div>
                  <div v-show="controlCrurent===2"  style="position: absolute;left: -25%;bottom: 0;width: 100%;height: 31px; padding: 5px;z-index:13;" ></div>
                  <div class=" tips volume-box" v-show="controlCrurent===2" >
                    <!-- 音量条 -->
                    <div class="volume-text">{{silderNum}}</div>
                    <div class="volume-all" ref="volumeAll" @click="handerVolume($event)"  @mousedown.prevent="volumeDrag($event)">
                      <div class="volume-now" ref="volumeNow" :style="'height:'+silderNum+'%'">

                      </div>
                      <div class="volume-slider" @click="handerClc"  @mousedown.prevent="volumeDrag($event)" :style="'bottom:'+silderNum+'%'"></div>
                    </div>
                  </div>
                </div>
                <div class="wave-tv-window father" @mouseover="controlCrurent=3" @mouseout="controlCrurent=0">
                  <div>
                    <i class="iconfont icon-window-window_line-copy"></i>
                  </div>
                  <div class="tips  window" v-show="controlCrurent===3">
                      <p >小窗播放</p>
                  </div>
                </div>
                <div class="wave-tv-allscreen father" @mouseover="controlCrurent=4" @mouseout="controlCrurent=0">
                  <div>
                    <i class="iconfont icon-full-screen" @click="allscreen"></i>
                  </div>
                  <div class="tips full-screen" v-show="controlCrurent===4">
                     <p > 全屏</p>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
</template>

<script>
import http from '@/util/http'
export default {
  data () {
    return {
      isControl: false, // 控制视频控制条的显示隐藏变量
      play: 'icon-playfill', // 播放和暂停图标
      totalTime: 0, // 视频总时长
      presentTime: '00:00:00', // 视频当前播放时长
      silderProgress: 0, // 这是时间进度小滑块的宽度百分比
      controlCrurent: 0, // 这是控制控件提示文字隐藏显示的
      speedList: [0.5, 1.0, 1.25, 1.5, 2.0], // 这是播放速度选项
      playSpeed: 1.0, // 这是默认的播放速度
      isCover: true, // 这是隐藏封面的变量
      speedItem: 1, // 默认倍速高亮下标
      isOnCover: 0, // 鼠标是否在 类为wave-fullbutton 的盒子上的判断变量 0是不在
      timer: null, // 定时器
      isMove: false, // 判断鼠标是否移动
      silderNum: 50 // 音量百分比

    }
  },
  mounted () {
    // console.log((this.$refs.picbox.offsetHeight / this.$refs.picbox.offsetWidth))
  },
  props: {
    Videodata: {
      type: Object,
      default: null
    },
    videoNews: {
      type: Object,
      default: null
    },
    CId: {
      type: Number,
      default: 0
    }
  },
  computed: {
    backgroundImage () {
      // this.Videodata.video_path
      return `background-image: url(${this.Videodata.video_pic})`
    }
  },
  watch: {
    isMove () {
      if (!this.isMove) {
        this.isControl = false
      } else {
        this.isControl = true
      }
    }
  },

  methods: {

    // 鼠标移入显示控制条方法
    controlShow () {
      // console.log('鼠标移入显示控制条了')
      this.isControl = true

      this.isOnCover = 1
    },
    // 鼠标移出隐藏控制条方法
    controlHide () {
      console.log('鼠标移出隐藏控制条了')
      this.isControl = false

      this.isOnCover = 0
    },

    // 鼠标在视频容器上是否移动的判断
    moveVideo () {
      this.isMove = true
      clearTimeout(this.timer)
      // console.log(this.isMove)

      this.timer = setTimeout(() => {
        // this.$nextTick(() => {
        this.isMove = false
        // console.log(this.isMove + '静止后')
        // this.set(this.isControl, false)// 静止后
        // console.log('指向', this)

        // })
      }, 3000)
    },
    // 点击切换播放和暂停的方法
    switchVideo () {
      console.log(this.$refs.video.paused)
      if (this.$refs.video.paused) {
        // 隐藏视频封面
        if (this.isCover) {
          this.isCover = false
        }

        this.$refs.video.play()
        this.play = 'icon-suspend'
      } else {
        this.$refs.video.pause()
        this.play = 'icon-playfill'
      }
    },
    // 视频播放时触发
    canplayVideo () {
      // console.log('视频播放辣', this.$refs.video.duration)
      this.totalTime = this.formatTime(this.$refs.video.duration)
    },

    // 每次视频时长变化时触发
    timeupdateVideo () {
      // 视频变化时长
      const time = this.$refs.video.currentTime

      // 视频总时长
      const times = this.$refs.video.duration
      // console.log('视频播放中', time)

      // 视频时长变化
      this.presentTime = this.formatTime(time)

      // 生成视频时间进度条
      const percent = Number(time) / Number(times) * 100
      this.$refs.progressNow.style.width = percent + '%'
      // 视频时间进度条小滑块
      this.silderProgress = percent
      // if (isNaN(percent)) {
      //   console.log(percent)
      // }
    },
    // 计算生成时长的函数
    formatTime (t) {
      let h = parseInt(t / 3600)
      h = h < 10 ? '0' + h : h
      let m = parseInt(t % 3600 / 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(t % 60)
      s = s < 10 ? '0' + s : s
      return h + ':' + m + ':' + s
    },
    //
    handerClc () {
      console.log('1111111111111111111')
    },
    // 记录视频的播放量
    handerVideoHistory () {
      // console.log(this.CId, '视频文章id')
      http.appvideoHistory(this.CId).then(res => {
        console.log(res.data)
      })
    },
    // 这是点击视频进度条跳转的方法
    clickProgress (e) {
      // offsetX和layerX兼容性问题
      if (e.offsetX) {
        // 都需要转字符串为数字类型
        const offX = Number(e.offsetX)
        // getBoundingClientRect表示了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 之外，其他的属性是相对于视图窗口的左上角 来计算的。
        const offWidth = Number(this.$refs.progressAll.getBoundingClientRect().width)

        const timeX = (offX / offWidth).toFixed(6)

        // 视频时长变化
        const time = (this.$refs.video.duration * timeX).toFixed(6)
        this.presentTime = this.formatTime(time)
        this.$refs.video.currentTime = time
        // console.log('这是点击切换后的时间', time)
      } else if (e.layerX) {
        // 都需要转字符串为数字类型
        const offX = Number(e.layerX)
        const offWidth = Number(this.$refs.progressAll.getBoundingClientRect().width)
        const timeX = (offX / offWidth).toFixed(6)
        // 视频时长变化
        const time = (this.$refs.video.duration * timeX).toFixed(6)
        this.presentTime = this.formatTime(time)
        this.$refs.video.currentTime = time
        // console.log('这是点击切换后的时间', time)
      }
    },
    // 这是鼠标按住小滑块拖动的方法 时长进度条
    startDrag (e) {
      // console.log('按住了小滑块')

      // const offsetX = e.offsetX
      this.$refs.progressNow.style.transition = ''
      document.onmousemove = (e) => {
        e.preventDefault()
        this.$refs.video.pause()
        this.play = 'icon-playfill'

        this.$refs.progressNow.style.transition = 'linear'
        const X = e.clientX
        const cl = X
        const { left, width } = this.$refs.progressAll.getBoundingClientRect()
        console.log(left)
        // 除去滑块按钮长度的进度条长度
        const ml = cl - left
        let progressWidth
        if (ml <= 0) {
        // 进度条长度最小和最大值的界定
          progressWidth = 0
        } else if (ml >= width) {
          progressWidth = width
        } else {
          progressWidth = ml
        }
        const timeX = (progressWidth / width).toFixed(6)

        const time = (this.$refs.video.duration * timeX).toFixed(6)
        this.presentTime = this.formatTime(time)
        this.$refs.video.currentTime = time
      }

      document.onmouseup = () => {
        this.$refs.video.play()
        this.play = 'icon-suspend'
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    // 拖动滑块这是控制音量进度条
    volumeDrag (e) {
      this.$refs.volumeAll.style.transition = ''
      document.onmousemove = (e) => {
        e.preventDefault()

        this.$refs.volumeNow.style.transition = 'linear'
        const Y = e.clientY
        const cl = Y
        const { bottom, height } = this.$refs.volumeAll.getBoundingClientRect()
        // console.log(bottom, height, Y, '内容')
        // 除去滑块按钮长度的进度条长度
        const ml = bottom - cl
        let progressHeight
        if (ml <= 0) {
        // 进度条长度最小和最大值的界定
          progressHeight = 0
        } else if (ml >= height) {
          progressHeight = height
        } else {
          progressHeight = ml
        }
        const heightY = (progressHeight / height).toFixed(2)
        this.silderNum = (heightY * 100).toFixed(0)
        this.$refs.video.volume = heightY
        console.log(Y, '计算结果')
      }

      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    // 点击进度条调节音量
    handerVolume (e) {
      // offsetX和layerX兼容性问题
      // if (e.clientY) {
      // 都需要转字符串为数字类型

      const offY = Number(e.clientY)
      // getBoundingClientRect表示了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 之外，其他的属性是相对于视图窗口的左上角 来计算的。
      const offHeight = Number(this.$refs.volumeAll.getBoundingClientRect().height)
      const offButton = Number(this.$refs.volumeAll.getBoundingClientRect().bottom)

      const volumeY = ((offButton - offY) / offHeight).toFixed(2)

      this.silderNum = (volumeY * 100).toFixed(0)

      console.log(offY, offHeight, this.silderNum)
      // console.log('这是点击切换后的时间', time)
      // } else if (e.layerY) {
      //   // 都需要转字符串为数字类型
      //   const offY = Number(e.layerY)
      //   const offHeight = Number(this.$refs.volumeAll.getBoundingClientRect().height)
      //   const offButton = Number(this.$refs.volumeAll.getBoundingClientRect().bottom)
      //   const volumeY = (offY / offHeight).toFixed(2)
      //   this.silderNum = (volumeY * 100).toFixed(0)
      //   // 音量变化
      // }
    },
    // 视频播放完成时
    endedVideo () {
      this.play = 'icon-playfill'
      // console.log('视频播放完了')
    },
    // 这是控制播放倍速的方法
    handleChangeSpeed (item, i) {
      // 设置倍速显示的值
      this.playSpeed = item
      // 设置倍速
      this.$refs.video.playbackRate = item
      // 给选中的速度添加高亮
      this.speedItem = i
      // 选择之后隐藏选项
      this.controlCrurent = 0
      console.log(item)
    },

    // 进入全屏方法
    allscreen () {
      const ele = this.$refs.Fullscreen
      this.$refs.video.style.width = ' '
      this.$refs.video.style.height = ' '
      // document.fullscreenElement判断当前是否处于全屏状态，是则为真
      if (!document.fullscreenElement) {
        console.log('当前是全屏1哦')

        if (ele.requestFullscreen) {
          ele.requestFullscreen()
        } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen()
        } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen()
        } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen()
        }
      } else {
        console.log('当前不是全屏1哦')

        if (document.exitFullScreen) {
          document.exitFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/init.scss" as h;
.wave-tv-box {

        width: 100%;
        border-radius: 15px;
        margin-top: 10px ;
        overflow: hidden;
        position: relative;
        display: flex;
        .wave-mask{

          width: 100%;
          height: 100%;
          z-index: 2;
          position: absolute;
          top: 0;
          left: 0;
          .wave-cover{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            .wave-cover-info{
              width: 100%;
              height: 100%;
              display: flex;
              position: relative;
              .wave-cover-info-pic{
                    display: inline-block;
                    vertical-align: middle;
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    background-size: auto 100%;
                    background-color: #000;
                    cursor: pointer;
                    padding: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    height: 100%;
                    z-index: 2;
                margin: 0 auto;
              }

              .wave-cover-message{
                width: 90%;
                z-index: 4;
                margin: 0 5%;
                color: #fff;
                position: absolute;
                left: 0;
                bottom: 5%;
                display: flex;
                justify-content: space-between;
                height: 30px;
                font-size: 12px;

            }
            }

          }
        }
        .wave-fullbutton{
          z-index: 5;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          cursor: pointer;
          .wave-fullbutton-box{
             width: 100%;
            height: 100%;
            display: flex;
            .wave-fullbutton-info{
              margin: auto;
              display: block;
              border: none;
              color: white;
              background: rgba(0,0,0,0);
              font-size: 36px;

              &:hover{
                color: h.$main-color;
              }
            }
          }
        }
        .wave-video-box{
          z-index:1;
          display: flex;
           overflow: hidden;
           background: #000;
           width:100%;
            position:relative;
            padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
            height: 0;
          .wave-video {
            position: absolute;
            top:50%;
            left: 50%;
            height: 100%;
            transform: translate(-50%,-50%);
            object-fit: cover;
        }
        }

        .wave-tv-control {
          z-index: 11 ;
          width: 95%;
          position: absolute;
          left: 2.5%;
          bottom: 3%;
          .wave-tv-progress {
            margin: 2px 0;
            z-index: 12;
            height: 4px;
            border-radius: 3px;
            width: 100%;
            background: rgba($color: #ededed, $alpha: 0.4);
            // overflow: hidden;
            .wave-tv-all{
              width: 100%;
              height: 100%;
              position: relative;
              &:hover{
                .silder-progress{
                  display: block;
                }
              }
              cursor: pointer;
              .wave-tv-progress-now {
              width: 0;
              height: 4px;
              background: h.$main-color;
              transition: all 0.1s;
              }
              .silder-progress{
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background:#fff ;
                position: absolute;
                top: -2px;
                display: none;
              }
            }

          }
          .wave-tv-bar {
            margin-top: 1.5%;
            display: flex;

            justify-content: space-between;
            line-height: 24px;
            .father{
              position: relative;
              margin-right:15px;
                &:hover {
                  color: h.$main-color;
                  cursor: pointer;
                }
              // 对按键添加提示需要
            }
            .tips{
              // 对按键添加提示需要
              position: absolute;
              font-size: 14px;
              color: white;
              border-radius: 5px;
              background: rgba($color: #000000, $alpha: .7);
              padding: 5px;
            }
            .wave-tv-list{
              padding: 10px 0;
              border-radius: 5px;
              text-align: center;
                }

            .wave-tv-bar-left {
              display: flex;
              .wave-tv-play {
                background: none;
                color: white;
                border: none;
                font-size: 24px;
                margin-right: 15px;
                cursor: pointer;
                &:hover {
                  color: h.$main-color;
                  cursor: pointer;
                }
              }
              .wave-tv-duration {
                display: flex;
                color: white;
                font-size: 12px;
              }
            }
            .wave-tv-bar-right {
              display: flex;

              color: white;
              .wave-tv-frame,
              .wave-tv-speed {
                font-size: 14px;
                .wave-tv-cheack{
                  z-index: 99;
                  width: 40px;
                  text-align: center;
                }
                .speed-list{
                  bottom: 40px;
                  left: -50%;
                  .speed-active{
                    color: h.$main-color;
                  }
                  .speed-item{
                    padding: 5px 20px;

                    &:hover{
                      background: rgb(45, 45, 45);
                    }
                  }
                }
              }
              .wave-tv-volume {

                font-size: 24px;
                .wave-tv-volume-text{
                  z-index: 99;
                }
                .volume-box{
                  left: -4px;
                  bottom: 40px;
                  height: 110px;
                  padding-bottom: 6px;
                  .volume-text{
                    text-align: center;

                    width: 22px;
                    color: white;
                    font-size: 12px;
                    transform: scale(0.83);
                  }
                  .volume-all{
                    width: 16%;
                    margin: 0 47%;
                    height: 80px;
                    background: #fff;
                    text-align: center;
                    border-radius: 2px;
                    position: relative;
                    .volume-now{
                      position: absolute;
                      bottom: 0;
                      width: 100%;
                      height: 50%;
                      background: h.$main-color;
                    }
                    .volume-slider{
                      width: 9px;
                      height: 9px;
                      background:#fff;
                      border-radius: 50%;
                      position: absolute;
                      bottom: 0;
                      left: -2.75px;
                    }
                  }

                }
              }
              .wave-tv-window {
                font-size: 18px;
                .window{
                  top: -150%;
                  left: -100%;
                  p{
                    width: 60px;
                    height: 20px;
                  }
                }
              }
              .wave-tv-allscreen {
                font-size: 16px;
                .full-screen{
                  top:-150%;
                  left: -50%;
                  p{
                    width: 30px;
                    height: 20px;
                  }
                }
              }
              // .wave-tv-frame,
              // .wave-tv-speed,
              // .wave-tv-volume,
              // .wave-tv-window,
              // .wave-tv-allscreen {

              // }
            }
          }
        }
      }
</style>
